<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchNow - 简单高效的搜索引擎</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4285F4',
                        secondary: '#34A853',
                        accent: '#FBBC05',
                        danger: '#EA4335',
                        neutral: {
                            100: '#F8F9FA',
                            200: '#E9ECEF',
                            300: '#DEE2E6',
                            400: '#CED4DA',
                            500: '#ADB5BD',
                            600: '#6C757D',
                            700: '#495057',
                            800: '#343A40',
                            900: '#212529'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .search-shadow {
                box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
            }
            .search-shadow:hover {
                box-shadow: 0 2px 8px rgba(32, 33, 36, 0.3);
            }
        }
    </style>
    
    <style>
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body class="bg-white text-neutral-800 min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="py-3 px-4 md:px-6">
        <div class="flex justify-end items-center space-x-4">
            <!-- 链接 -->
            <a href="#" class="text-neutral-700 hover:text-primary text-sm transition-colors">关于</a>
            <a href="#" class="text-neutral-700 hover:text-primary text-sm transition-colors">商店</a>
            
            <!-- 图标按钮 -->
            <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-neutral-100 text-neutral-700 transition-colors">
                <i class="fa fa-th text-sm"></i>
            </button>
            
            <!-- 用户头像 -->
            <button class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-medium hover:shadow-md transition-shadow">
                <span>JD</span>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col items-center justify-center px-4 py-12 fade-in">
        <!-- 搜索引擎 Logo -->
        <div class="mb-8 text-center">
            <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold">
                <span class="text-primary">S</span>
                <span class="text-danger">e</span>
                <span class="text-accent">a</span>
                <span class="text-primary">r</span>
                <span class="text-secondary">c</span>
                <span class="text-danger">h</span>
                <span class="text-neutral-800">N</span>
                <span class="text-primary">o</span>
                <span class="text-accent">w</span>
            </h1>
        </div>
        
        <!-- 搜索框 -->
        <div class="w-full max-w-2xl mb-8">
            <div class="relative">
                <!-- 搜索图标 -->
                <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500"></i>
                
                <!-- 搜索输入框 -->
                <input 
                    type="text" 
                    placeholder="搜索任何内容..." 
                    class="w-full pl-12 pr-12 py-3 rounded-full border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30 search-shadow transition-all"
                >
                
                <!-- 语音搜索按钮 -->
                <button class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-microphone text-lg"></i>
                </button>
            </div>
        </div>
        
        <!-- 搜索按钮 -->
        <div class="flex flex-wrap justify-center gap-3 mb-8">
            <button class="px-5 py-2 bg-neutral-100 hover:bg-neutral-200 text-neutral-800 rounded-md text-sm font-medium transition-colors">
                百度一下
            </button>
            <button class="px-5 py-2 bg-neutral-100 hover:bg-neutral-200 text-neutral-800 rounded-md text-sm font-medium transition-colors">
                谷歌搜索
            </button>
        </div>
        
        <!-- 语言提示 -->
        <div class="text-center text-sm text-neutral-600">
            <p>提供其他语言版本： 
                <a href="#" class="text-primary hover:underline mx-1">中文(简体)</a>
                <a href="#" class="text-primary hover:underline mx-1">English</a>
                <a href="#" class="text-primary hover:underline mx-1">日本語</a>
                <a href="#" class="text-primary hover:underline mx-1">한국어</a>
            </p>
        </div>
    </main>

    <!-- 底部区域 -->
    <footer class="bg-neutral-100 text-neutral-600">
        <!-- 地区信息 -->
        <div class="px-4 md:px-6 py-4 border-b border-neutral-200">
            <p class="text-sm">中国 · 北京市</p>
        </div>
        
        <!-- 底部链接 -->
        <div class="px-4 md:px-6 py-4">
            <div class="flex flex-wrap justify-center gap-y-2 gap-x-6 text-sm">
                <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
                <a href="#" class="hover:text-primary transition-colors">使用条款</a>
                <a href="#" class="hover:text-primary transition-colors">设置</a>
                <a href="#" class="hover:text-primary transition-colors">反馈</a>
                <a href="#" class="hover:text-primary transition-colors">广告服务</a>
                <a href="#" class="hover:text-primary transition-colors">商务合作</a>
            </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="px-4 md:px-6 py-3 text-center text-xs text-neutral-500">
            <p>© 2023 SearchNow. 保留所有权利。</p>
        </div>
    </footer>

    <!-- JavaScript 功能 -->
    <script>
        // 搜索框聚焦效果
        const searchInput = document.querySelector('input[type="text"]');
        
        // 页面加载后自动聚焦到搜索框
        window.addEventListener('load', () => {
            searchInput.focus();
        });
        
        // 处理搜索提交
        function handleSearch() {
            const query = searchInput.value.trim();
            if (query) {
                // 实际应用中，这里会跳转到搜索结果页
                alert(`搜索内容: ${query}`);
            }
        }
        
        // 绑定搜索按钮点击事件
        const searchButtons = document.querySelectorAll('button:not([class*="fa-"])');
        searchButtons.forEach(button => {
            button.addEventListener('click', handleSearch);
        });
        
        // 绑定回车键搜索
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                handleSearch();
            }
        });
    </script>
</body>
</html>